
<template>

    <el-drawer
            class="cul-draw config-draw"
            :before-close="handleClose"
            :title="typetitle.addTitle"
            :close-on-click-modal="true"
            v-bind="$attrs"
            v-on="$listeners"
            :with-header="false"
            direction="rtl"
            custom-class="demo-drawer"
            ref="drawer"
            size="60%">

        <h2>编辑{{typetitle.addTitle}}</h2>
        <!--栏目-->
        <div class="clear content-form">

            <div>
                <p>共{{childrenNum!==0?childrenNum:area2adddata.length}} 个{{typetitle.table2colTitle}}</p>
            </div>

            <div class="submit-content">
                <div class="area-title">
                    <label>{{typetitle.table1colTitle}}</label>
                   <!-- <span class="li-title">{{typetitle.table1colTitle}}/{{typetitle.table2colTitle}}</span>-->

                </div>

                <div class="area-1">

                    <input type="text"  v-model="allareadata.info_section_name"
                           placeholder="请输入内容"
                           :class="allareadata.info_section_name.trim()===''&&issubmit?'iswarninput':''"
                           @blur="edityes()">

                </div>
                <div class="area-title">
                    <label>{{typetitle.table2colTitle}}</label>
                    <i class="el-icon-plus"  @click="addareali()">新增{{typetitle.table2colTitle}}</i>
                    <textarea type="text" placeholder="例如：春熙路 浣花溪" v-model="moreadddata" class="moreaddinput"></textarea>
                    <button @click="moreadd" class="el-icon-plus">批量添加</button> </div>
                <div class="area-2">
                    <ul class="clear">
                        <li v-for="(item,index) in area2adddata"
                            :class="item.state===2?'del-input-item':'canceldel-input-item'"
                        >
                            <input type="text"
                                   :placeholder="[index===area2adddata.length-1?'请输入内容':'']"
                                   v-model="item.info_section_name"
                                   :class="item.info_section_name.trim()===''&&issubmit?'iswarninput':''"
                                   @blur="edityes()"
                            ></input>

                            <i class="el-icon-delete" title="删除" @click="deleteareali(item,index)" v-if="item.state!==2"></i>
                            <i class="el-icon-refresh-right" title="撤销删除" @click="cancledeleteareali(item,index)" v-else></i>
                        </li>
                    </ul>
                </div>
                <div class="demo-drawer__footer clear">
                    <el-button type="primary" size="small" @click="saveSubmit">保存</el-button>
                    <el-button @click="cancelForm" size="small">关 闭</el-button>
                </div>

            </div>
        </div>

    </el-drawer>

</template>

<script>
    export default {
        name: "SysCulDraw",
        //addOrEdit 0 默认值 1修改 2 修改
        props: ["form","addOrEdit",'initstate','typetitle','drawUrl','nowtype','childrenNum'],
        data() {
            return {



                table: false,
                selectAreaData: [],
                loading: false,


                formLabelWidth: "80px",

                //时间选项

                currentPage:1,
                /*板块级数据*/
                area2adddata:[],
                newaddinptvalue:{
                    info_section_name:'',
                    state:0,
                },
                //提交的新增总数据
                allareadata:{
                    info_section_name:'',
                    info_sectionList:[],
                    //0新增的，1修改，2，删除
                },
                //批量
                moreadddata:'',
                //控制初始化
                issubmit:false,
//是否执行过删除
                isDelState:false,

                isEditState:false
            };
        },
        computed:{
            //实时数据
        },
        methods: {
            handleClose(done) {
                if (this.loading) {
                    return;
                }
            },
            //初始化
            init(){
                //重置状态
                this.isEditState=false;
                this.isDelState=false;
                if (this.addOrEdit===2){
                    //编辑
                  this.getIDCulData(this.form.info_section_id)
                }
                else if (this.addOrEdit===1){
                    //添加
                    this.allareadata.info_section_name=this.form.info_section_name
                    this.allareadata.info_sectionList=[]
                        this.area2adddata=[]
                    // console.log('allareadata')
                    // console.log(this.allareadata)
                }

            },
            //添加一条新的：
            edityes(){
                this.isEditState=true
            },
            addareali(){
                this.issubmit=false
                this.isEditState=true
                this.area2adddata.push(this.newaddinptvalue)
                // console.log( 'this.area2adddata')
                // console.log( this.area2adddata)
                this.newaddinptvalue={
                    info_section_name:'',
                    info_section_id:'',
                    state:0,
                }
            }
            ,
            //改变数据状态2删除
            changedelState(item,type){
                if(type==='删除'){
                    // console.log('删除了')
                    this.isDelState=true
                    for (let i=0;i<this.area2adddata.length;i++){

                        if (this.area2adddata[i].info_section_id===item.info_section_id){
                            //修改的

                            this.area2adddata[i].state=2;
                            this.area2adddata=[...this.area2adddata];
                            // console.log('this.area2adddata');
                            // console.log(this.area2adddata);
                            break;
                        }

                    }
                }
                if(type==='撤销'){
                    // console.log('撤销')
                    this.isDelState=true
                    for (let i=0;i<this.area2adddata.length;i++){

                        if (this.area2adddata[i].info_section_id===item.info_section_id){
                            //撤销
                            this.$delete( this.area2adddata[i],'state')
                            // console.log('this.area2adddata')
                            // console.log(this.area2adddata)
                            break;
                        }

                    }
                }

            },
            //删除数据
            deleteareali(item,index){
                // console.log('点击删除')
                // console.log(item)
                if (item.info_section_id!==''&&item.info_section_id!==undefined){
                    //已有的删除
                    // console.log(1111111111111)
                    this.changedelState(item,'删除')
                    // console.log(this.area2adddata)
                }else {
                    //新增的删除
                    this.area2adddata.splice(index,1)
                    // console.log('点击了删除')
                }

            },
            cancledeleteareali(item,index){
                this.changedelState(item,'撤销')
            },
            //排序
            compare(property){
                return function(a,b){
                    var value1 = a[property];
                    var value2 = b[property];
                    return value1 - value2;
                }
            },
            //批量添加
            moreadd(){
                let arr=this.moreadddata.split(' ')
                //获得当前最大序号

                        arr.forEach((item,i)=>{

                            if (this.area2adddata.length===1&&this.area2adddata[0].info_section_name===''){
                                this.area2adddata=[]
                            }

                            this.area2adddata.push({
                                info_section_name:item,
                                state:0//0为添加 1修改 2删除
                            })
                        })

            },

            //获取不同操作状态的数据
            typeData(type){
                if (this.addOrEdit===1){
                    //添加打开时
                    return {
                        info_section_name:this.allareadata.info_section_name,
                        info_sectionList:this.area2adddata,
                    };
                }else if (this.addOrEdit===2) {
                    if (type===2){
                        let selectArea2Data=this.area2adddata.filter(item=>item.state===type)
                        let arr=[]
                        selectArea2Data.forEach(item=>{
                            arr.push(item.info_section_id)
                        })
                        return arr
                    }else {
                        let selectArea2Data=this.area2adddata.filter(item=>item.state!==2)
                        return {
                            info_section_name:this.allareadata.info_section_name,

                            info_section_id:this.allareadata.info_section_id,
                            info_sectionList:selectArea2Data,
                        };
                    }

                }

            },

            //修改数据。

            //添加请求
            addpost(){
                this.axios({
                    method:'post',
                    data:this.typeData(0),
                    url:this.drawUrl.addurl,
                }).then(data=>{
                    // console.log('添加')
                    // console.log(data)
                    if (data.data.code===200){
                        this.$message({
                            type:'success',
                            message:data.data.msg
                        })
                        this.$emit('onclose',true)
                    }
                    else {
                        this.$message({
                            type:'warning',
                            message:data.data.msg
                        })
                        this.$emit('onclose',true)
                    }
                })
            },
            //删除请求
            delPost(){

                this.axios({
                    method:'post',
                    url:this.drawUrl.delurl,
                    data:this.typeData(2),
                }).then(data=>{
                    // console.log('删除成功')
                    // console.log(data)
                    this.$message({
                        type:'success',
                        message:data.data.msg
                    })
                    this.area2adddata=[]
                    this.$emit('onclose',true)
                })
            },
            //编辑请求
            editPost(){
                // console.log('修改')
                // console.log(this.allareadata)

                this.axios({
                    method:'post',
                    url:this.drawUrl.editurl,
                    data:this.typeData(1),
                }).then(data=>{
                    // console.log('修改成功')
                    // console.log(data)
                    this.$message({
                        type:'success',
                        message:data.data.msg
                    })
                    this.area2adddata=[]
                    this.$emit('onclose',true)
                })

            },
            //提交
            saveSubmit(){
                // console.log('culadd')
                // console.log(this.area2adddata)

                let area2adddataiserror=this.area2adddata.filter(item=>item.info_section_name.trim()==='')
                // console.log(area2adddataiserror)
                if (this.allareadata.info_section_name.trim()===''||area2adddataiserror.length>0){

                    // console.log('报警了')
                    this.issubmit=true
                    this.$message({
                        type:'error',
                        message:'操作失败，有未填写的项目存在。'
                    })
                }else {
                    this.issubmit=false
                    if (this.addOrEdit===1){
                        this.addpost()
                    }else if (this.addOrEdit===2) {

                        if (this.isDelState&&this.typeData(2).length>0){

                            // console.log('删除的数据~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~')
                            // console.log(this.typeData(2))
                            this.delPost()
                        }
                        if (this.isEditState){
                            // console.log('修改的数据~~~~~~~~~~~~~~~~~')
                            // console.log(this.typeData(1))
                            this.editPost()
                        }
                    }

                }
            },
            //取消操作
            cancelForm() {
                this.issubmit=false
                this.$emit("onclose",false);

            },
            getIDCulData(id){
                /* this.showData=areaData;*/
                // console.log('`````url`````')
                // console.log()
                this.axios({
                    url:this.drawUrl.geturl,
                    method:'get',
                    params:{limit:this.pageSize,page:this.currentPage}
                }).then(data=>{
                    // console.log('获取全部数据')
                    // console.log(data)
                   let _obj=data.data.dataList.filter(item=>item.info_section_id===id)
                    this.allareadata=_obj[0]
                    // console.log('this.allareadata~~~~~~~~~~~~')
                    // console.log(this.allareadata)
                    this.area2adddata=_obj[0].info_sectionList
                })
            },

        },


        watch:{
            initstate(){
                // console.log('`````````````````this.form`````````````')
                // console.log(this.form)
                if (this.initstate){
                    // console.log(this.initstate)
                    this.init()
                }
            }
        }
    };
</script>

<style lang="less">


    /* .el-drawer.rtl{
         overflow: scroll;
     }*/
    /*1.显示滚动条：当内容超出容器的时候，可以拖动：*/
   /* .el-drawer__body {
        !*  overflow: auto;*!
        overflow-y: auto;
    }

    !*2.隐藏滚动条，太丑了*!
    .el-drawer__container ::-webkit-scrollbar{
        display: none;
    }
    .clear::after{
        content: '';
        display: block;
        clear:both ;
    }
    h2 {
        font-size: 1.6rem;
        font-weight: 400;
        padding: 2rem;

        .selectTabeleTips {
            font-size: 12px;
            line-height: 16px;
            font-weight: initial;
            color: #aaaaaa;
        }

        >span{
            font-size: 2rem;
            font-weight: bold;

            color: #ff9d2b;
        }
        .el-button{
            float: right ;
            color: #ffffff;
        }
    }
    .content-form {
        padding: 0 2rem 2rem;
        min-width: 800px;
    }
    .demo-drawer__footer{
        padding: 20px 100px;

        .el-button:nth-of-type(1){
            float: left;
        }
        .el-button:nth-of-type(2){
            float: right;
        }
    }
    .area-title{
        position: relative;
        margin: 10px 0;
        padding-left:10% ;
        width: 80%;
        height: 40px;
        line-height: 40px;
        .el-icon-plus{
            border: none;
            display: inline-block;
            border-radius: 4px;
            height: 40px;
            line-height: 40px;
            padding: 0 20px;
            color: white;
            cursor: pointer;
            margin-left: 4%;
            background-color: #ff9d2b;

        }
        label{
            font-size: 18px;
            position: absolute;
            top:0;
            left: 0;
            background-color: #ff9d2b;
            width: 10%;
            height: 100%;
            text-align: center;
            color: white;
        }
        .li-title{
            display: inline-block;
            text-align: center;
        }
        .li-title:nth-of-type(1){

            width: 15%;
        }
        .li-title:nth-of-type(2){
            width:10%;
        }

        .moreaddinput{
            //限制最高宽度。
            position: absolute;
            right: 0;
            top:0;
            display: inline-block;
            margin-left: 20px;
            width: 300px;
            max-height:40px ;
            outline: none;
            resize: none;
        }
    }
    .area-1{

        padding-left:8% ;
        width: 30%;
       !* input:nth-of-type(1){
            width: 50%;
        }*!
        input:nth-of-type(2){
            width: 20%;
        }
    }

    .area-2{
        padding-left:8% ;


        ul{
            padding:0;
            margin: 0;
        }
        li{
            list-style: none;float: left;
            width: 30%;
            height: 40px;
            padding: 0;
            margin: 10px 5px;
            input:nth-of-type(1){
                width: 50%;
            }
            input:nth-of-type(2){
                width: 20%;
            }
            .el-icon-delete{
                cursor: pointer;
            }
            &.del-input-item{

                input{
                    background-color: #cdd0da;
                }
            }
            &.canceldel-input-item{
                input{
                    background-color: #ffffff;
                }
            }
            .el-icon-refresh-right{
                cursor: pointer;
            }
        }

    }
    .area-2,.area-1{
        .iswarninput{
            border: 1px solid red;
        }
        input{
            outline: none;
            box-sizing: border-box;
            border: 1px solid #b6b6b6;
            height: 40px;
            line-height: 40px;
        }
        input:nth-of-type(1){
            padding:4px 8px;
        }
        input:nth-of-type(2){
            padding:4px 8px;
            margin: 0 8px;
        }
    }
    .el-drawer{
        outline: none;
    }*/

</style>